<template>
    <div class="left">
        <router-link v-for="(v,i) in routerList" :key='i' :to='v.path'>{{v.mata.title}}</router-link>
    </div>
</template>
<script>
import routerList from "../router/routerList"
export default {
    data(){
        return{
            routerList:routerList
        }
    }
}
</script>


<style lang="scss" scoped>
    .left{
        width: 15%;
        border-radius: 15px;
        border: 1px solid #ccc;
        margin-right: 10px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        background: rgb(222, 235, 231);
        a{
            width: 100%;
            text-decoration: none;
            color: #000;
            border-bottom:1px dotted #ccc;
            text-align: center;
            padding: 15px 0;
            font-size: 20px;
            border-radius: 15px;
            &.router-link-active{
                background: #fff;
                color: rgb(63, 218, 166);
            }
        }
    }
</style>